<template>
  <div :style="styleItem">
    <div id="CollectionCharts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "CollectionCharts",
  props: {
    styleItem: {
      type: Object,
      default: () => {},
    },
    yAxisData: {
      type: Array,
      default: () => [],
    },
    // collect_series: {
    //   // 包含 柱子的宽 颜色  这一截的相关数据
    //   type: Array,
    //   default: () => [],
    // },
    collectionData: {
      type: Array,
      default: () => [],
    }
  },
  data() {
    return {
      changeTimer: null,
      myChart: null,
      companyList: [],
      inCarTotalList: [],
      inDepotTotalList: [],
      packageTotalList: [],
    };
  },
  mounted() {
    this.showChart();
    console.log(this.collectionData, 'wwwwwwww')
  },
  methods: {
    getMoreData(i) {
     
      this.companyList = []
      this.inCarTotalList = []
      this.inDepotTotalList = []
      this.packageTotalList = []
     // console.log(i, 3*(i-1), '3*(i-1)mmmm')
     // console.log("this.collectionData.length", this.collectionData);
      // slice  splice(3*(i-1), 3)
      this.collectionData.slice(3*(i-1), 3*(i-1)+3).map(m => {
        this.companyList.push(m.companyName)
        this.inCarTotalList.push(m.inCarTotal)
        this.inDepotTotalList.push(m.inDepotTotal)
        this.packageTotalList.push(m.packageTotal)
      })

    },
    reloadChart() {
      clearInterval(this.changeTimer);
      console.log("cccccthis.collectionData.length", this.collectionData);
      this.myChart.clear();
      let i = 0
      this.getMoreData(i + 1)
      this.showChart();
     
      this.changeTimer = setInterval(() => {
        i++
        this.getMoreData(i)
        this.showChart();
        if (parseInt(this.collectionData.length % 3) == 0) {
          if (parseInt(this.collectionData.length / 3) <= i) {
            i = 0
          }
        } else {
          if (parseInt(this.collectionData.length / 3) + 1 <= i) {
            i = 0
          }
        }
      }, 10000)
    },

    showChart() {
      if (
        this.myChart != null &&
        this.myChart != "" &&
        this.myChart != "undefined"
      ) {
        this.myChart.dispose();
      }

      this.myChart = echarts.init(document.getElementById("CollectionCharts"));

      const rich = {
        n: {
          fontSize: this.$fontSize.fontSize(0.11),
          lineHeight: this.$fontSize.fontSize(0.12),
        }
      }
      const makeMultiLine = (str, charQty) => {
        const strs = str.split('')
        const len = strs.length
        if (len < charQty + 1) {
          return str
        }
        let result = ''
        strs.forEach((_, index) => {
          result += _
          if ((index + 1) % charQty === 0 && index < len - 1) {
            result += '\n'
          }
        })
        return result
      }

      let option = {
        // title: {
        //   text: "上收情况",
        //   x: "30%",
        //   top: 10,
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: this.$fontSize.fontSize(0.14)
        //   }
        // },
        barWidth: this.$fontSize.fontSize(0.2),
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              // 阴影指示器样式设置
              width: "auto", // 阴影大小
              // width: this.$fontSize.fontSize(0.1),
              color: "rgba(150,150,150,0.3)", // 阴影颜色
            },
          },
        },
        grid: {
          top: "10%", // 组件离容器上侧的距离,百分比字符串或整型数字
          left: "3%", // 组件离容器左侧的距离,百分比字符串或整型数字
          right: "5%",
          bottom: "5%",
          containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
        },
        legend: {
          //   type: "scroll",
          //   icon: "square",
          //   right: "1%",
          //   align: "left",
          // icon: "rect",
          top: "2%",
          bottom: 0,
          itemWidth: this.$fontSize.fontSize(0.1),
          itemHeight: this.$fontSize.fontSize(0.1),
          itemGap: this.$fontSize.fontSize(0.12),
          textStyle: {
            color: "#fff",
            fontSize: this.$fontSize.fontSize(0.1),
          },
          data: ['装箱', '装车', '入库']
        },
        // {
        //   type: "scroll",
        //   icon: "square",
        //   right: "1%",
        //   align: "left",
        //   top: "40",
        //   itemGap: 20,
        //   // bottom:'50%',
        //   textStyle: {
        //     color: "#AAAAAA",
        //     fontSize: this.$fontSize.fontSize(0.12)
        //   },
        //   data: collect_legend2
        // }
        // legend: {
        //   data: ["装箱", "入当地库", "入窍楚库"],
        //   top: 10,
        //   right: "10",
        //   textStyle: {
        //     color: "rgba(250,250,250,0.6)",
        //      fontSize: this.$fontSize.fontSize(.12),
        //   },
        // },
        xAxis: {
          type: "value",
          splitLine: false,
          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "rgba(69, 240, 234, 1)",
            },
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#ccc",
            fontFamily: "PingFangSC",
            fontSize: this.$fontSize.fontSize(0.12),
            fontWeight: 300,
            // interval: 0,
            // rotate: -5
          },
        },

        yAxis: {
          type: "category",
          data: this.companyList,

          axisLine: {
            //  改变x轴颜色
            lineStyle: {
              color: "rgba(69, 240, 234, 1)",
            },
          },
          axisLabel: {
            // showMaxLabel: true,
            // color: "#ccc",
            // fontFamily: "PingFangSC",
            fontSize: this.$fontSize.fontSize(0.12),
            lineHeight: this.$fontSize.fontSize(0.13),
            // fontWeight: 300,
            // formatter: function (val) {
            //   // console.log(val)
            //   let str = makeMultiLine(val, 7) // 每 7 个字符一行
            //   return `{n|${str}}` // 使用 rich 中的 n 来设置样式
            // },
            // rich,
            // interval: 0 // 显示所有的 x 轴上的文字不隐藏

            formatter: (val) => {
              let c = document.createElement("canvas");
              const ctx = c.getContext("2d");
              ctx.font = "20px normal"; // 设置画布内的字体，与设置的textStyle一致
              const arr = val.split("");
              arr.map((item) => ctx.measureText(item).width)
                .reduce((pre, next, index) => {
                  const nLen = pre + next;
                  if (nLen > 100) {
                    arr[index - 1] += "\n";
                    return next;
                  } else {
                    return nLen;
                  }
                });
              c = null;
              return arr.join("");
            },
            interval: 0
          },
        },
        series: [
          {
              "name": "装箱",
              "type": "bar",
              "stack": "total",
              "label": {
                  "show": true,
                  fontSize: this.$fontSize.fontSize(0.12),
                  formatter: (val) => {
                    if (val.value == 0) {
                      return ''
                    } else {
                      return val.value
                    }
                  }
              },
              "emphasis": {
                  "focus": "series"
              },
              "color": '#EAB844',
              // "rgb(103, 243, 102)",
              "data": this.packageTotalList
              // [
              //     320,
              //     302,
              //     301,
              //     120
              // ]
          },
          {
              "name": "装车",
              "type": "bar",
              "stack": "total",
              "label": {
                  "show": true,
                  fontSize: this.$fontSize.fontSize(0.12),
                  formatter: (val) => {
                    if (val.value == 0) {
                      return ''
                    } else {
                      return val.value
                    }
                  }
              },
              "emphasis": {
                  "focus": "series"
              },
              "color": '#007013',
              // "rgb(1, 172, 0)",
              "data": this.inCarTotalList
              // this.inDepotTotalList
              // [
              //     120,
              //     132,
              //     101,
              //     55
              // ]
          },
          {
              "name": "入库",
              "type": "bar",
              "stack": "total",
              "label": {
                  "show": true,
                  fontSize: this.$fontSize.fontSize(0.12),
                  formatter: (val) => {
                    if (val.value == 0) {
                      return ''
                    } else {
                      return val.value
                    }
                  }
              },
              "emphasis": {
                  "focus": "series"
              },
              "color": '#008bc9',
              // '#007013',
              // "rgb(0, 89, 15)",
              "data": this.inDepotTotalList
              // this.inCarTotalList
              // [
              //     220,
              //     182,
              //     191,
              //     77
              // ]
          }
        ]
        // series: this.collect_series,
      };
      this.myChart.setOption(option);
    //   window.addEventListener("resize", function() {
    //     this.myChart.resize();
    //   });
    },
  },
};
</script>

<style lang="scss">
#CollectionCharts {
  width: 100%;
  height: 23.5vh;
}
</style>
